<template>
  <kennel
    :navList="navList"
    :navClass="'d-nav-bar-black'"
    :navActiveId="navActiveId"
    :isShowFooter="isShowFooter"
    :isLogin="isLogin"
    @login="handleLogin"
    @logout="handleLogout">
    <template v-slot:header-side>
      <div class="d-header-side">
        <a class="d-text-link header-logo" :href="getMicroPath('#/')">
          <img class="d-img logo-image" src="../assets/images/dog-logo-sm.png" />
          <span class="logo-text">便笺(DPad)</span>
        </a>
      </div>
    </template>
    <template v-slot:layout-body>
      <router-view />
    </template>
  </kennel>
</template>

<script>
import { Kennel } from '@daelui/vdog/dist/pages'
import { mapState } from 'vuex'
import uSer from '@/service/action/user.action.js'
import ebus from '@/components/ebus'

import config from '@/micros/config'

// 判断环境是否是微应用打开
let microPath = ''
if (window.__POWERED_BY_QIANKUN__) {
  microPath = config.microPath
}

export default {
  components: {
    Kennel
  },

  computed: mapState({
    // 选中的导航id
    navActiveId: state => state.navActiveId
  }),

  data () {
    return {
      navList: [
        {
          text: '首页',
          url: ('#' + (microPath || '/')).replace('\/\/', '/'),
          match: '/home',
          id: 1
        },
        {
          text: '导航',
          url: '#' + microPath + '/nave/list',
          id: 4,
          match: '/nave',
          children: [
            {
              text: '规则管理',
              url: '#' + microPath + '/nave/rule',
              id: 42
            },
            {
              text: '环境管理',
              url: '#' + microPath + '/nave/envirment',
              id: 43
            }
          ]
        },
        {
          text: '笔记',
          url: '#' + microPath + '/note/list',
          match: '/note',
          id: 3,
          children: [
            {
              text: '类型管理',
              url: '#' + microPath + '/note/type',
              id: 33
            }
          ]
        },
        {
          text: '任务',
          url: '#' + microPath + '/task/list',
          match: '/task',
          id: 2,
          children: [
            {
              text: '类型管理',
              url: '#' + microPath + '/task/type',
              id: 23
            }
          ]
        },
        {
          text: '归档',
          url: '#' + microPath + '/doc/list',
          match: '/doc',
          id: 5,
          children: [
            {
              text: '数据列表',
              url: '#' + microPath + '/data/list',
              match: '/data',
              id: 52
            }
          ]
        }
      ],
      // 是否显示底部
      isShowFooter: false,
      // 是否登录
      isLogin: false
    }
  },

mounted () {
  // 登录完成
  ebus.$off('onLoginComplete')
  ebus.$on('onLoginComplete', () => {
    this.isLogin = true
  })
  // 超时
  ebus.$off('onLoginExpire')
  ebus.$on('onLoginExpire', () => {
    this.isLogin = false
  })
  // 获取用户信息
  uSer.queryUserInfo().then(res => {
    if (res && res.data && res.data.username) {
      ebus.$emit('onLoginComplete')
    }
  })
},

  methods: {
    handleLogin () {
      // 弹出窗口
      ebus.$emit('onShowLogin')
    },
    handleLogout () {
      uSer.logout().then(res => {

      })
      this.isLogin = false
      // 清除token
      localStorage.removeItem('daelui-token')
    }
  }
}
</script>

<style lang="less">
.d-layout-header {
  position: relative;
  z-index: 5;
}
.layout-content {
  min-height: calc(100vh - 48px - 32px - 38px - 8px - 16px);
}
.d-table-tr {
  .d-grid-actions {
    .d-text-theme {
      color: #999;
    }
  }
  &:hover {
    .d-grid-actions {
      .d-text-theme {
        color: #3391ff;
      }
    }
  }
}
.d-layout-content {
  & > .d-contenter {
    display: flex;
    width: 100%;
    min-height: 100%;
    .paner-list {
      display: flex;
      flex-direction: column;
      flex: 1;
      & > .d-paner-table {
        flex: 1;
        & > .d-paner-body {
          flex: 1;
        }
      }
    }
    & > .d-paner {
      flex: 1;
    }
  }
}
</style>
